<template>
  <div class="product-list">
    <!-- 头部 -->
    <div class="filter">
      <el-form
        ref="filterForm"
        :model="filterForm"
        label-width="90px"
        label-position="left"
        size="small"
      >
        <div class="flexRBC">
          <el-form-item label="商品名称：" prop="name" size="small" style="marginBottom:0">
            <el-input v-model="filterForm.name" placeholder="请输入商品名称" />
            <el-button
              v-if="!filterCollapseActive"
              type="primary"
              round
              @keyup.enter.native="searchByKeyword"
              @click="searchByKeyword"
            >查 询</el-button>
          </el-form-item>
          <el-button
            v-if="!$store.getters.banBtnList.includes('BTN_WCANYIN_GOODS_ADD')"
            type="primary"
            size="small"
            round
            @click="openProductAdd"
          >新增菜品</el-button>
        </div>
        <!-- 筛选 -->
        <div class="app-main-filter-collapse-box">
          <el-collapse @change="filterCollapseChange">
            <el-collapse-item ref="filterCollapse" title="按条件筛选" name="1">
              <el-form-item label="所属分类：" prop="classifyId">
                <el-select v-model="filterForm.classifyId" filterable placeholder="请选择">
                  <el-option label="全部分类" value="all" />
                  <el-option v-for="v in classifyOptions" :key="v.id" :label="v.name" :value="v.id" />
                </el-select>
              </el-form-item>
              <el-form-item label="商品状态：" prop="status">
                <el-select v-model="filterForm.status" filterable placeholder="请选择">
                  <el-option label="全部状态" value="all" />
                  <el-option v-for="(v,k) in statusOptions" :key="k" :label="v" :value="k" />
                </el-select>
              </el-form-item>
              <el-form-item class="filter-btn">
                <el-button type="primary" round @click="submitForm('filterForm')">查 询</el-button>
                <el-button round @click="resetForm('filterForm')">重 置</el-button>
              </el-form-item>
            </el-collapse-item>
          </el-collapse>
        </div>
      </el-form>
    </div>

    <div class="content">
      <!-- 表格内容 -->
      <div class="list-table">
        <el-table
          v-loading="tableLoading"
          :data="list"
          border
          stripe
          style="width: 100%"
          empty-text="暂无数据"
        >
          <el-table-column prop="name" label="商品名称" fixed />
          <el-table-column prop="classifyName" label="分类" />
          <el-table-column prop="price" label="价格(元)" />
          <el-table-column prop="description" label="商品描述" />
          <el-table-column label="商品状态">
            <template slot-scope="scope">
              <span
                :class="scope.row.status===1?'app-text-color-success':'app-text-color-warning'"
              >{{ statusOptions[scope.row.status] }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right">
            <template slot-scope="scope">
              <el-button
                v-if="!$store.getters.banBtnList.includes('BTN_WCANYIN_GOODS_EDIT')"
                type="text"
                size="mini"
                @click="goBusinessGoodsEdit(scope.$index, scope.row)"
              >编辑</el-button>
              <!-- <el-button
                v-if="!$store.getters.banBtnList.includes('BTN_WCANYIN_GOODS_STATUS_MANAGE')&&scope.row.status!==0"
                type="text"
                size="mini"
                @click="changeStatus(scope.$index, scope.row,0)"
              >下架</el-button>-->
              <el-button
                v-if="!$store.getters.banBtnList.includes('BTN_WCANYIN_GOODS_STATUS_MANAGE')"
                type="text"
                size="mini"
                @click="changeStatus(scope.$index, scope.row,scope.row.status===1?3:1)"
              >{{ scope.row.status===1?'售罄':'在售' }}</el-button>
              <el-button
                v-if="!$store.getters.banBtnList.includes('BTN_WCANYIN_GOODS_DELETE')"
                type="text"
                size="mini"
                @click="changeStatus(scope.$index, scope.row,2)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <pagination-direction
          v-if="paginationConfig.total!==0"
          :config="paginationConfig"
          @sizeschange="sizesChange"
          @pagechange="pageChange"
        />
      </div>
    </div>

    <!--彈框 -->
    <DialogEditGoods ref="editGoods" />
  </div>
</template>

<script>
import DialogEditGoods from './components/DialogEditGoods'
import {
  getGoodsList,
  updateGoodsStatus,
  getClassifyList
} from '@/views/wcyModule/api/product'
export default {
  components: {
    DialogEditGoods
  },
  props: ['shopId'],
  data() {
    return {
      // 配置
      classifyOptions: [],
      statusOptions: {
        0: '已下架',
        1: '出售中',
        // 2: "已删除",
        3: '已售罄'
      },
      // 分页配置
      paginationConfig: {
        direction: 'center', // 分页位置
        layout: 'total, sizes, prev, pager, next, jumper', // 分页类型
        pageSizes: [10, 20], // 分页pages
        total: 0,
        page: 1, // 页数-默认1
        pageSize: 10 // 每页条数-默认10
      },
      searchSelect: 'name', // 搜索的类型
      // 状态
      tableLoading: false, // 表格loading
      searchLoading: false, // 表格loading
      filterCollapseActive: false, // 筛选是否打开
      // 数据
      list: [], // 表格数据
      // 筛选数据
      filterForm: {
        name: '',
        classifyId: 'all',
        status: 'all'
      }
    }
  },
  watch: {
    shopId(val) {
      this.initData()
    }
  },
  mounted() {
    this.getClassifyOptions()
    this.initData()
  },
  methods: {
    /**
       * 获取数据
       */
    // 获取数据
    initData(
      pageNum = this.paginationConfig.page,
      pageSize = this.paginationConfig.pageSize
    ) {
      const params = Object.assign({}, this.filterForm)
      params.pageNum = pageNum
      params.pageSize = pageSize
      params.shopId = this.shopId
      params.status = 1
      // 清除多余字段
      for (const key in params) {
        if (params[key] === '' || params[key] === 'all') {
          delete params[key]
        }
      }
      // 判断筛选是否展开
      if (!this.filterCollapseActive) {
        delete params['classifyId']
        delete params['status']
      }
      this.tableLoading = true
      getGoodsList(params)
        .then(res => {
          this.list = res.data.row
          this.paginationConfig.total = res.data.total
          this.paginationConfig.page = res.data.pageNum
        })
        .finally(() => {
          this.tableLoading = false
          this.searchLoading = false
        })
    },

    // 分页sizes改变
    sizesChange(pageSize) {
      this.initData()
    },

    // 分页page改变
    pageChange(page) {
      this.initData()
    },

    // 获取所有分类
    getClassifyOptions() {
      const params = {}
      params.shopId = this.shopId
      params.pageNum = 1
      params.pageSize = 999
      getClassifyList(params)
        .then(res => {
          this.classifyOptions = res.data.row
        })
        .catch(err => {})
        .finally(() => {})
    },

    /**
       * 按钮组
       */
    // 点击搜索
    searchByKeyword() {
      this.searchLoading = true
      this.initData(1)
    },

    // 点击新增
    openProductAdd() {
      this.$refs.editGoods.open('add', this.shopId).then(res => {
        this.initData()
      })
    },

    //  更新商品状态 在售 售罄  删除
    changeStatus(index, row, status) {
      const statusName = ['下架', '在售', '删除', '售罄']
      let str = ''
      if (status === 2) {
        str = `此操作将永久删除${row.name}, 是否继续?`
      } else {
        str = `此操作将使${row.name}改为${statusName[status]}状态, 是否继续?`
      }
      this.$confirm(str, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true,
        roundButton: true
      })
        .then(() => {
          const data = {
            id: row.id,
            shopId: this.shopId,
            status: status
          }
          this.tableLoading = true
          updateGoodsStatus(data)
            .then(res => {
              if (res.code === 0) {
                this.$notify({
                  title: '成功',
                  message: status === 2 ? '删除成功' : '更新状态成功',
                  type: 'success',
                  duration: 2000,
                  offset: 40
                })
                this.initData()
              }
            })
            .catch(err => {
              this.tableLoading = false
            })
        })
        .catch(err => {})
    },

    // 编辑
    goBusinessGoodsEdit(index, row) {
      this.$refs.editGoods.open('edit', row.id, this.shopId).then(res => {
        this.initData()
      })
    },

    // 筛选
    submitForm(formName) {
      this.initData(1)
    },

    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },

    /**
       * 状态组
       */
    // 筛选
    filterCollapseChange(val) {
      if (val.length === 0) {
        this.filterCollapseActive = false
      } else {
        this.filterCollapseActive = true
      }
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .product-list {
    .el-input {
      width: 300px;
      margin-right: 10px;
    }
    // 单选换行
    .el-radio + .el-radio {
      margin-left: 0;
    }
    .el-radio {
      margin-right: 10px;
      line-height: 32px;
    }
    .el-select {
      width: 300px;
    }

    /* 表格 */
    .content {
      margin-top: 10px;
    }
  }
</style>
